<template>
  <a-modal v-model:visible="open" width="600px" :footer="null" :title="null" @cancel="handleCancel">
    <!-- <a-tabs v-model:activeKey="activeKey" type="card">
            <a-tab-pane key="1" tab="根据订单编号查询店铺信息">
                <div class="input-search">
                    <a-input v-model:value="inputValue" placeholder="请输入订单编号" />
                    <a-button class="input-search-btn" type="primary" :disabled="!inputValue" :loading="loading" @click="searchInfo">查询</a-button>
                </div>
                <div class="input-info">
                    <a-descriptions title="店铺信息">
                        <a-descriptions-item :span="2" label="订单号">{{ inputInfo?.orderNo || '---' }}</a-descriptions-item>
                        <a-descriptions-item :span="2" label="手机号">{{ inputInfo?.tel || '---' }}</a-descriptions-item>
                        <a-descriptions-item :span="2" label="时长">{{ inputInfo?.days || '---' }}</a-descriptions-item>
                        <a-descriptions-item :span="2" label="创建时间">{{ inputInfo?.createTime || '---' }}</a-descriptions-item>
                        <a-descriptions-item :span="2" label="返回结果">{{ inputInfo?.msg || '---' }}</a-descriptions-item>
                    </a-descriptions>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="发送店铺"> -->
    <a-form
      ref="FormRef"
      :model="formState"
      :rules="FormRules"
      name="basic"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 15 }"
      autocomplete="off"
    >
      <a-form-item label="业务类型" name="isSend">
        <a-radio-group v-model:value="formState.isSend" button-style="solid" @change="typeChange">
          <a-radio-button :value="true">发送店铺</a-radio-button>
          <a-radio-button :value="false">退店铺</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="订单编号" name="orderNo">
        <a-input style="width: 100%" v-model:value="formState.orderNo" />
      </a-form-item>
      <a-form-item label="时长" name="days">
        <a-select
          style="width: 100%"
          v-model:value="formState.days"
          show-search
          placeholder="请选择时长"
          :options="daysOptions"
        ></a-select>
      </a-form-item>
      <a-form-item label="手机号码" name="tel">
        <a-input style="width: 100%" v-model:value="formState.tel" />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
        <a-button type="primary" @click="submitInfo" :loadng="sendTicketLoading || offlineTicketLoading">
          提交
        </a-button>
        <!-- <a-button style="margin-left: 20px;" type="primary" @click="unsubscribedStore" :loadng="offlineTicketLoading">退店铺</a-button> -->
      </a-form-item>
    </a-form>
    <!-- </a-tab-pane>
        </a-tabs> -->
  </a-modal>
</template>
<script lang="ts" setup name="">
import { useVModel } from '@vueuse/core'
import { computed, ref } from 'vue'
// import getTicketByOrderNo from '@/services/premium/getTicketByOrderNo'
// import type { pageData } from '@/services/premium/getTicketByOrderNo'
import { message, type FormInstance } from 'ant-design-vue'
import sendTicket from '@/services/operational-tool/sendTicket'
import type { SendTicketType } from '@/services/operational-tool/sendTicket'
import offlineTicket from '@/services/operational-tool/offlineTicket'
import { omit } from 'lodash-es'

// "days": 104,
// "orderNo": "ybs-zzbw-202403081634",
// "tel": "18855806934"

const FormRef = ref<FormInstance>()

interface Props {
  show: boolean
}

interface Emits {
  (e: 'on-submit'): void
}

const props = withDefaults(defineProps<Props>(), {
  show: false
})

const emit = defineEmits<Emits>()

const open = useVModel(props, 'show')
// const inputValue = ref<string>()
// const inputInfo = ref<pageData>()
// const activeKey = ref('1')

const formState = ref<SendTicketType>({
  isSend: true,
  days: undefined,
  orderNo: undefined,
  tel: undefined
})

function handleCancel() {
  open.value = false
  // inputValue.value = undefined
  // inputInfo.value = undefined
}

// const [,getTicketByOrderNoFn, loading] = getTicketByOrderNo()
// async function searchInfo() {
//     const [err, res] = await getTicketByOrderNoFn({
//         orderNo: inputValue.value
//     })
//     if (!err) {
//         inputInfo.value = res.data.data
//     } else {
//         message.error(err.message)
//     }
// }

const daysOptions = ref([
  {
    label: '季单',
    value: 104
  },
  {
    label: '半年单',
    value: 194
  },
  {
    label: '年单',
    value: 379
  }
])

const FormRules = computed(() => {
  return {
    isSend: [{ required: true, message: '请选择业务类型' }],
    orderNo: [{ required: true, message: '请输入订单编号' }],
    days: [{ required: formState.value.isSend, message: '请选择时长' }],
    tel: [
      { required: formState.value.isSend, message: '请输入手机号' },
      { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确' }
    ]
  }
})

// 发送店铺
const [, sendTicketFn, sendTicketLoading] = sendTicket()
async function deliveryShop() {
  FormRef.value
    ?.validate()
    .then(async () => {
      const [err] = await sendTicketFn({ ...omit(formState.value, ['isSend']) })
      if (!err) {
        message.success('操作成功')
        FormRef.value?.resetFields()
      } else {
        message.warning(err.message || '操作失败请稍后重试！')
      }
    })
    .catch((err: any) => {
      console.log(err)
    })
}
// 退订店铺
const [, offlineTicketFn, offlineTicketLoading] = offlineTicket()
async function unsubscribedStore() {
  FormRef.value?.clearValidate(['days', 'tel'])
  FormRef.value
    ?.validate()
    .then(async () => {
      const [err] = await offlineTicketFn({
        orderNo: formState.value.orderNo
      })
      if (!err) {
        message.success('操作成功')
        FormRef.value?.resetFields()
        formState.value.isSend = false
      } else {
        message.warning(err.message || '操作失败请稍后重试！')
      }
    })
    .catch((err: any) => {
      err
    })
}

function typeChange() {
  FormRef.value?.clearValidate(['days', 'tel', 'orderNo'])
  formState.value.days = undefined
  formState.value.orderNo = undefined
  formState.value.tel = undefined
}

function submitInfo() {
  if (formState.value.isSend) {
    deliveryShop()
  } else {
    unsubscribedStore()
  }
}
</script>
<style lang="scss" scoped>
.input-search {
  display: flex;
  margin-top: 20px;

  .input-search-btn {
    margin-left: 10px;
  }
}

.input-info {
  margin-top: 20px;
}
</style>
